<template>
  <div class="settlement">
    <my-header :title="title" :showLeft="true" />
    <div class="view-body">
      <section class="cart-address">
        <p>订单配送至<span class="address-tag" v-if="userInfo.tag">{{userInfo.tag}}</span></p>

        <p class="address-detail">
          <span @click="$router.push('/myAddress')" v-if="Object.keys(userInfo).length!==0" class="3">{{userInfo.address}}{{userInfo.bottom}}</span>
          <span v-else>
            <span v-if="haveAddress" @click="$router.push('/myAddress')" class="1">选择收货地址</span>
            <span v-else @click="addAddress" class="2">新增收货地址</span>
          </span>
          <i class="fa fa-angle-right"></i>
        </p>

        <span v-if="userInfo" class="address-name">
          <span>{{userInfo.name}}</span>
          <span v-if="userInfo.sex">({{userInfo.sex}})</span>
          <span class="phone">{{userInfo.phone}}</span>
        </span>
      </section>
      <!-- 送餐部分 -->
      <my-delivery :shopInfo="orderInfo.shopInfo"></my-delivery>
      <!-- 价格部分 -->
      <select-food-info :orderInfo="orderInfo" :totalPrice="totalPrice" />

      <!-- 备注 -->
      <div class="cartItem-detail">
        <cart-item title="餐具份数" :remark="remarkInfo.tableware || '未选择'" @click.native="isShow=true" />
        <cart-item title="订单备份" :remark="remarkInfo.remark ||'口味 偏好'" @click.native="$router.push('remark')" />
        <cart-item title="发票信息" remark="不需要开发票" />
      </div>
      <!-- 餐具Dialogo -->
      <table-ware :isShow="isShow" @close="isShow = false" />
    </div>
    <!-- 底部 -->
    <footer class="addTotal">
      <span>￥{{totalPrice}}</span>
      <button @click="handlePay">去结算</button>
    </footer>
  </div>
</template>

<script>
import MyHeader from '@/components/Header/Header'
import MyDelivery from '@/components/Order/Delivery'
import SelectFoodInfo from '@/components/Order/selectFoodInfo'
import CartItem from '@/components/Order/CartItem'
import TableWare from '@/components/Order/Tableware'
import { Toast } from 'mint-ui'

export default {
  name: 'MySettlement',
  components: {
    MyHeader,
    MyDelivery,
    SelectFoodInfo,
    CartItem,
    TableWare

  },
  data() {
    return {
      title: '确认订单',
      haveAddress: false,
      isShow: false
    }
  },
  computed: {
    // 获取用户收货地址
    userInfo() {
      return this.$store.getters.userInfo
    },
    orderInfo() {
      return this.$store.getters.foodSelect
    },
    totalPrice() {
      return this.$store.getters.totalPrice
    },
    remarkInfo() {
      return this.$store.getters.remarkInfo
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 获取所有当前地址
      if (Object.keys(vm.userInfo).length === 0) {
        vm.getData()
      }
    })
  },
  methods: {
    addAddress() {
      this.$router.push({
        name: 'addAddress',
        params: {
          title: '添加地址',
          addressInfo: {
            name: '',
            sex: '',
            phone: '',
            address: '',
            bottom: '',
            tag: ''
          }
        }
      })
    },
    getData() {
      this.$http(`/api/user/user_info/${sessionStorage.ele_login}`).then(res => {
        if (res.data.myAddress.length > 0) {
          this.haveAddress = true
        }
        else {
          this.haveAddress = false
        }
      })
    },
    handlePay() {
      if (Object.keys(this.userInfo).length === 0) {
        Toast({
          message: '请选择收货地址',
          position: 'middle',
          duration: 2000
        })
        return
      }
      this.$router.push('/pay')
    }
  }
}
</script>

<style lang="less" scoped>
.settlement {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .view-body {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 49px;
    background-image: linear-gradient(0deg, #f5f5f5, #f5f5f5 65%, hsla(0, 0%, 96%, 0.3) 75%, hsla(0, 0%, 96%, 0)), linear-gradient(270deg, #009eef, #009eef);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
    .cart-address {
      width: 100%;
      height: 100%;
      color: #fff;
      padding: 0 12px;
      box-sizing: border-box;
      p {
        margin: 0;
        padding: 0;
        padding-top: 15px;
        color: #eee;
        .address-tag {
          margin-left: 10px;
          border: 1px solid #eee;
        }
      }
      h3 {
        margin-top: 10px;
        font-size: 25px;
        i {
          margin-left: 8px;
        }
      }
      .detail-address {
        display: flex;
        width: 300px;
        margin-top: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        align-items: center;
        font-size: 25px;
        font-weight: 700;
        i {
          margin-left: 8px;
          margin-top: 5px;
        }
      }
      .address-name {
        display: block;
        margin-top: 8px;
        .phone {
          margin-left: 10px;
        }
      }
      .cartItem-detail {
        margin-top: 15px;
      }
    }
  }
  .addTotal {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    height: 49px;
    color: #fff;
    span {
      font-size: 20px;
      padding-left: 10px;
    }
    button {
      height: 100%;
      border: none;
      outline: none;
      padding: 0 30px;
      background: #00e067;
    }
  }
}
</style>
